<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>机型管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link href="../../css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="../../css/font-awesome.min.css?v=4.3.0" rel="stylesheet">

    <!-- jqgrid-->
    <link href="../../css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">

    <link href="../../css/animate.min.css" rel="stylesheet">
    <link href="../../css/style.min.css?v=3.2.0" rel="stylesheet">


    <!-- 全局js -->
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="../../js/bootstrap.min.js?v=3.4.0"></script>

    <style>
        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>
<style>
        .navbar-header {
            width: 150px;
        }

        .top-navigation .navbar-nav .open .dropdown-menu>li>a,
        .top-navigation .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 20px;
        }
    </style>
</head>

<body class="gray-bg top-navigation">
    <div class="row border-bottom white-bg">
                <nav class="navbar navbar-static-top" role="navigation">
                    <div class="navbar-header">
                        <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed"
                            type="button">
                            <i class="fa fa-reorder"></i>
                        </button>
                        <a href="../index.html" class="navbar-brand">LOGO</a>
                    </div>
                    <div class="navbar-collapse collapse" id="navbar">
                        <script>
        $(function () {
            $("#navbar").load('/ts/navbar.html');
        });
    </script>
                    </div>
                </nav>
            </div>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="container">
            <div class="row">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>机型管理</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="jqGrid_wrapper">
                            <table id="table_list_2"></table>
                            <div id="pager_list_2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Peity -->
    <script src="../../js/plugins/peity/jquery.peity.min.js"></script>

    <!-- jqGrid -->
    <script src="../../js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
    <script src="../../js/plugins/jqgrid/jquery.jqGrid.min.js"></script>


    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
            $.jgrid.defaults.styleUI = "Bootstrap";
            var a = [{
                id: "1",
                invdate: "2010-05-24",
                name: "B788",
                total: "C"
            }, {
                id: "2",
                invdate: "2010-05-25",
                name: "B737",
                total: "D"
            }, {
                id: "3",
                invdate: "2007-09-01",
                name: "B789",
                total: "C"
            }, {
                id: "4",
                invdate: "2007-10-04",
                name: "B789",
                total: "C"
            }, {
                id: "5",
                invdate: "2007-10-05",
                name: "B789",
                total: "C1"
            }];
           
            $("#table_list_2").jqGrid({
                data: a,
                datatype: "local",
                height: 450,
                autowidth: true,
                shrinkToFit: true,
                rowNum: 20,
                rowList: [10, 20, 30],
                colNames: ["序号", "日期", "机型", "类别",  "备注"],
                colModel: [{
                    name: "id",
                    index: "id",
                    editable: true,
                    width: 60,
                    sorttype: "int",
                    search: true
                }, {
                    name: "invdate",
                    index: "invdate",
                    editable: true,
                    width: 90,
                    sorttype: "date",
                    formatter: "date"
                }, {
                    name: "name",
                    index: "name",
                    editable: true,
                    width: 100
                }, {
                    name: "total",
                    index: "total",
                    editable: true,
                    width: 80
                }, {
                    name: "note",
                    index: "note",
                    editable: true,
                    width: 100,
                    sortable: false
                }],
                pager: "#pager_list_2",
                viewrecords: true,
                caption: "机型管理",
                add: true,
                edit: true,
                addtext: "Add",
                edittext: "Edit",
                hidegrid: false
            });
            $("#table_list_2").setSelection(4, true);
            $("#table_list_2").jqGrid("navGrid", "#pager_list_2", {
                edit: true,
                add: true,
                del: true,
                search: true
            }, {
                height: 200,
                reloadAfterSubmit: true
            });
            $(window).bind("resize", function () {
                var b = $(".jqGrid_wrapper").width();
                $("#table_list_1").setGridWidth(b);
                $("#table_list_2").setGridWidth(b)
            })
        });
    </script>

    

</body>

</html>